<div class="feature-tree">
  <!-- 顶部 -->
  <div nz-row class="title" nzAlign="middle" nzJustify="space-between">
    <div nz-col nzSpan="12">Features</div>
    <div nz-col nzSpan="12">
      <div nz-row nzAlign="middle" nzJustify="end" nzGutter="2">
        <span nz-col>
          <!-- 新增 -->
          <button nz-button nzType="primary" nzSize="small" (click)="showAddModule()">
            <!-- <span nz-icon nzType="edit"></span> -->
            新增
          </button>
        </span>

        <!-- 编辑和保存按钮 -->
        <span nz-col>
          <!-- 编辑 按钮 -->
          <button *ngIf="!isEditing" nz-button nzType="primary" nzSize="small" (click)="editFeature()">
            <!-- <span nz-icon nzType="edit"></span> -->
            编辑
          </button>
          <!-- 保存按钮 -->
          <button *ngIf="isEditing" nz-button nzType="primary" nzSize="small" (click)="saveEdit()">
            <!-- <span nz-icon nzType="save" nzTheme="outline"></span> -->
            保存
          </button>
        </span>
      </div>
    </div>
  </div>

  <!-- 非编辑状态不可拖拽 -->
  <ng-container *ngIf="!isEditing">
    <div cdkDropList class="example-list">
      <!-- example-box 样式一直存在, select 根据选中的idx改变  -->
      <div [ngClass]="{
          'example-box':true,
          'select' : i == selectedFeatureIdx
        }" style="cursor: pointer" *ngFor="let f of features;let i = index" (click)="onFeatureClick(i)">
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{f.feature}}


      </div>
    </div>
  </ng-container>

  <!-- 编辑状态可拖拽 可删除-->
  <ng-container *ngIf="isEditing">
    <div cdkDropList class="example-list" style="cursor: move;" (cdkDropListDropped)="drop($event)">
      <div *ngFor="let feature of features;let i = index" cdkDrag [ngClass]="{
        'example-box':true,
        'select' : i == selectedFeatureIdx
      }">
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        <input style="width: 200px;" nz-input [(ngModel)]="featuresCache[i]['feature']" />
        <!-- 删除图标 -->

        <span nz-popconfirm nzPopconfirmTitle="确定删除吗?" class="icon" nz-icon nzType="minus-circle"
          (nzOnConfirm)="deleteFeature(i)" nzTheme="outline"></span>
      </div>
    </div>
  </ng-container>
</div>


<nz-modal [(nzVisible)]="isaddVisible" nzTitle="新增Feature" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isLoading">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="featureForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="feature" nzRequired>Feature</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请输入Feature">
          <input nz-input nz-input formControlName="feature" name="feature" type="text" id="feature">
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>